import React from 'react';
import { NavLink } from 'react-router-dom';



const Footer = () => {
  return (
    <footer style={styles.footer}>
      <nav style={styles.nav}>
        {navItems.map((item) => (
          <NavLink
            key={item.path}
            to={item.path}
            style={({ isActive }) => styles.navItem(isActive)}
          >
            {({ isActive }) => (
              <>
                <img 
                  src={item.icon} 
                  alt={item.label}
                  style={styles.navImg(isActive)} 
                />
                <div>{item.label}</div>
              </>
            )}
          </NavLink>
        ))}
      </nav>
    </footer>
  );
};



export default Footer;


// 导航配置数据
const navItems = [
  {
    path: "/",
    icon: require('../assets/images/BookCity.svg').default,  // CommonJS 写法
    label: "书城"
  },
  {
    path: "/bookshelf",
    icon: require('../assets/images/bookshelf.svg').default,
    label: "书架"
  },
  {
    path: "/Cvans",
    icon: require('../assets/images/community.svg').default,
    label: "社区"
  },
  {
    path: "/profile",
    icon: require('../assets/images/my.svg').default,
    label: "我的"
  }
];

// 样式常量
const styles = {
  body: {
    backgroundColor: '#000',
    color: '#fff', /* 可选：全局字体颜色变白 */
  },
  footer: {
    position: 'fixed',
    bottom: 0,
    left: 0,
    right: 0,
    backgroundColor: 'black',
    borderTop: '1px solid #eaeaea',
    padding: '10px 0'
  },
  nav: {
    width: '100%',
    maxWidth: '600px',
    margin: '0 auto',
    display: 'flex',
    justifyContent: 'space-around',
    alignItems: 'center'
  },
  navItem: isActive => ({
    width: '25%',
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
    textDecoration: 'none',
    fontSize: '12px',
    paddingTop: 8,
    paddingBottom: 8,
    color: isActive ? '#ff5500' : 'white'  // 动态文字颜色
  }),
  navImg: isActive => ({
    width: 24,
    height: 24,
    marginBottom: 4,
    filter: isActive ? 'invert(53%) sepia(93%) saturate(1413%) hue-rotate(358deg) brightness(102%) contrast(101%)' : 'none'
  })
};